<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0607-JS作业-延迟菜单-螺旋</title>
	<style type="text/css">
		html {
			height: 100%;
			font-family: "Microsoft YaHei";
		}
		body{
			height: 100%;
			margin: 0;
			background: url("images/bg0607.jpg") no-repeat center/cover;
		}
		ul{margin: 0;padding: 0;list-style: none;}
		i {font-style: normal;}
		a {text-decoration: none;}
		.wrap{
			width: 160px;
			margin: auto;
			padding: 100px;
		}
		.menubox{
			overflow: hidden;
			position: relative;
			width: 100%;
		}
		.menubox li{
			position: relative;
			left: -160px;
			width: 150px;
			height: 30px;
			margin: 8px 0;
			background-color: rgba(255,255,255,.6);
			font-size: 14px;
			line-height: 30px;
			text-align: center;
			box-shadow: 2px 2px 5px #000;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<section class="wrap">
		<ul class="menubox">
			<li>选项1</li>
			<li>选项2</li>
			<li>选项3</li>
			<li>选项4</li>
			<li>选项5</li>
			<li>选项6</li>
		</ul>
	</section>
</body>
<script>
	var oMenu = document.getElementsByClassName('menubox')[0],
		oLi = oMenu.getElementsByTagName('li');
	
	//点击页面开始动画
	document.onclick = function(){
		    for(var i=0;i<oLi.length;i++){
                (function(i){
                    function fnDelay(){
                        fnMove(oLi[i],'left',0,500)
                    }
	                setTimeout(fnDelay,i*300)//每个依次延迟i*300毫秒执行
                })(i);
		    }
    };
	
	//时间运动框架
	function fnMove(elem,attr,tval,time){
        var sTime = new Date(),//开始时间
            sVal = parseFloat(getstyle(elem)[attr]),
            nMove = tval - sVal;
       
		function fn(){
	        var nTime = new Date(),//现在时间
	            rTime = nTime - sTime,//执行时间
	            num = rTime / time;//执行时间 / 目标时间
	            cMove = nMove * num;//经过距离
            
	        if(num >= 1){
                elem.style[attr] = 0;
	        }else{
                elem.style[attr] = sVal + nMove * num +'px';
                requestAnimationFrame(fn)
	        }
        }
        fn();
	}

	//获取元素
	function getstyle(elem){
	    return getComputedStyle(elem) || elem.currentStyle;
	}
</script>
</html>